<template>
  <div ref="playerRef"></div>
</template>

<script setup>
import { ref } from "vue";
import APlayer from "aplayer";
import "aplayer/dist/APlayer.min.css";

const playerRef = ref(null);
let player = null;

const play = (url, name) => {
  player = new APlayer({
    container: playerRef.value,
    audio: [
      {
        name,
        artist: "xx",
        cover: 'https://github.com/u3u.png',
        url: url,
      },
    ],

  });
};

const close = () => {
  if (player) {
    player.destroy();
  }
};

defineExpose({
  play,
  close,
});
</script>
